<template>
  <div>
    <!-- 搜索和新增部分 -->
    <el-row class="search_content">
      <el-col :span="8">
        编号:
        <el-input
          v-model="inventory_id"
          placeholder="请输入内容"
          :clearable="true"
          size="mini"
        ></el-input>
      </el-col>
      <el-col :span="4">
        花卉名:
        <el-input
          v-model="flowerName"
          placeholder="请输入内容"
          size="mini"
          :clearable="true"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button
          size="mini"
          class="search_btn"
          type="primary"
          plain
          @click="search"
          >搜索</el-button
        ></el-col
      >
      <el-col :span="2">
        <!-- <el-button
          type="primary"
          @click="openAdd"
          class="fr add_btn"
          size="mini"
        >
          新增
        </el-button> -->
      </el-col>
    </el-row>
    <!-- 列表显示客户信息 -->
    <!-- 注selection-change为选择项改变时的事件 stripe为斑马纹 -->
    <el-table id="el-table" :data="lists" stripe>
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-form-item label="花卉名">
              <span>{{ props.row.flowerList[0].flower_name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.classify[0].classify_name }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.create_time | formatDate }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column label="租赁编号" prop="inventory_id"></el-table-column>
      <el-table-column
        label="花卉"
        prop="flower_name"
      ></el-table-column>
      <el-table-column
        label="租出数量"
        prop="lease_count"
      ><template slot-scope="scope">
        <span>{{scope.row.lease_count==null?0:scope.row.lease_count}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="库存数量"
        prop="inventory_count"
      ><template slot-scope="scope">
        <span>{{scope.row.inventory_count==null?0:scope.row.inventory_count}}</span>
        </template>
      </el-table-column>
      <el-table-column label="已损坏数量" prop="damage_count">
        <template slot-scope="scope">
        <span>{{scope.row.damage_count==null?0:scope.row.damage_count}}</span>
        </template>
      </el-table-column>
      <el-table-column label="购入数量" prop="rent_count">
<template slot-scope="scope">
        <span>{{scope.row.rent_count==null?0:scope.row.rent_count}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" align="middle" justify="center" id="bottom">
      <!-- 分页栏 -->
      <el-col :span="8">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="currPageChange"
          :current-page="curr_page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入http
import http from '@/utils/httpUtil'
export default {
  data () {
    return {
      direction: 'rtl',
      drawer: false,
      labelPosition: 'left',
      gotop: true,
      isShow: false,
      updateShow: false,
      action: {
        inventoryList: 'ssmService/inventory/selectPageInventory',
        selectInventoryById: 'ssmService/inventory/selectInventoryById'
      },
      lists: [],
      permission: [],
      total: 0,
      page_size: 10,
      curr_page: 1,
      flowerName: '',
      inventory_id: null,
      clientName: ''
    }
  },
  mounted () {
    this.getInventoryList()
  },
  methods: {
    // 当前页总条数改变时函数
    pageSizeChange (pageSize) {
      this.inventory_id = ''
      this.clientName = ''
      this.flowerName = ''
      this.getInventoryList(
        this.inventory_id,
        this.flowerName,
        1,
        pageSize
      )
    },
    // 当前页改变时函数
    currPageChange (currPage) {
      this.inventory_id = ''
      this.clientName = ''
      this.flowerName = ''
      this.getInventoryList(
        this.inventory_id,
        this.flowerName,
        currPage,
        this.page_size
      )
    },
    // 获取租出列表
    getInventoryList (
      inventory_id = null,
      flowerName = null,
      curr_page = 1,
      page_size = 10
    ) {
      const params = {
        curr_page: curr_page,
        page_size: page_size
      }
      if (inventory_id !== null && inventory_id !== '') {
        params['inventory_id'] = inventory_id
      }
      if (flowerName !== null && flowerName !== '') {
        params['flower_name'] = flowerName
      }
      http.xhrGet(this, this.action.inventoryList, params, res => {
        // console.log(res)
        // 总条数，当前页，当前页最大条数，数据
        this.total = res.data.total
        this.curr_page = res.data.pageNum
        this.page_size = res.data.pageSize
        this.lists = res.data.list
      })
    },
    // 搜索
    search () {
      let inventory_id = this.inventory_id
      let flower_name = this.flowerName
      // \s 代表匹配一些空白符     包括：空格、Tab、换行、回车,等价于 [\t\r\n ] 去除首尾空格
      // inventory_id = inventory_id.replace(/(^\s*)|(\s*$)/g, '')
      // client_name = client_name.replace(/(^\s*)|(\s*$)/g, '')
      // flower_name = flower_name.replace(/(^\s*)|(\s*$)/g, '')
      this.getInventoryList(inventory_id, flower_name, 1, 10)
    }
  },
  components: {
  }
}
</script>

<style scoped>
@import "../../assets/css/reset.css";
@import "../../assets/css/client.css";
</style>
